<template>
  <div class="tools-m-card" @click="onClick(data, $event)">
    <div class="top">
      <span class="title">{{ data.name || '通知' }}</span>&nbsp;&nbsp;
      <mt-badge
        class="level"
        v-if="level.level"
        :type="level.level">
        {{ level.text }}
      </mt-badge>
      <!-- <mt-badge v-if="data.isNew" class="isNew" type="error">未读</mt-badge> -->
    </div>
    <div class="body">
      <span class="content">{{ data.title }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: function(){
        return {
          level: 1,
          isNew: 1,
          content: '没有内容',
          title: '通知'
        }
      }
    },
    onClick: {
      type: Function,
      default: function(){
        return function(){}
      }
    }
  },
  computed: {
    level(){
      let levelmap = ['','warning', 'error'];
      let textmap = ['', '普通重要', '十分重要'];
      return {
        level:levelmap[this.data.level] || '',
        text:textmap[this.data.level] || ''
      }
    }
  }
}
</script>

<style scoped>
.tools-m-card{
  background: #fff;
  /* border-bottom: 1px solid #ccc; */
}
.tools-m-card .top{
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  position: relative;
  padding: 0 20px;
  line-height: 50px;
  /* border-bottom: 1px solid #eee; */
}
.tools-m-card .top:before{
  content: "";
  pointer-events: none; /* 防止点击触发 */
  box-sizing: border-box;
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
  top: 0;
  /* border-radius: 8px; */
  border-bottom:1px solid #f0f0f0;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform: scale(0.5);
  transform-origin: 0 0;
}
.tools-m-card .top .title{
  font-size: 20px;
  font-weight: bold;
}
.tools-m-card .top .level,
.tools-m-card .top .isNew{
  line-height: 1.2;
}
.tools-m-card .body .content{
  display: inline-block;
  /* border-left: 1px solid #f0f0f0; */
  padding: 10px 10px 10px 20px;
  box-sizing: border-box;
}
</style>
